<template>
  <view>
    <mxp-popup ref="_adUnlockPopup2Ref" width="325px" model="center" background="transparent">
      <view class="unlock-module">
        <image src="/static/images/video/ad_popup_bg2.png" mode="scaleToFill" style="width: 230px; height: 312px"></image>
        <view hoverClass="hover" class="butt-box" @click="openADFun">
          <text class="text">看广告解锁剧集</text>
        </view>
        <view class="close-box" hoverClass="hover" @click="hide"><mxp-icon name="guanbi1" size="30px" color="#FFFFFF"></mxp-icon></view>
      </view>
    </mxp-popup>
  </view>
</template>

<script setup lang="ts">
  import { getCurrentInstance, ref } from 'vue';
  import MxpPopup from '@/mxp-ui/mxp-popup/mxp-popup.vue';
  import MxpIcon from '@/mxp-ui/mxp-icon/mxp-icon.vue';

  export type ShowEvent = {
    /** 观看广告视频成功回调 */
    openAd?: () => void;
  };
  defineOptions({
    name: 'ad-unlock-popup2',
  });

  const _adUnlockPopup2Ref = ref<InstanceType<typeof MxpPopup> | null>(null);
  let openAd: ShowEvent['openAd'] = undefined;
  const instance = getCurrentInstance();
  /** 显示 */
  function show(_data: ShowEvent) {
    openAd = _data.openAd;

    if (!_adUnlockPopup2Ref.value && instance?.proxy?.$refs?._adUnlockPopup2Ref) {
      _adUnlockPopup2Ref.value = instance?.proxy.$refs._adUnlockPopup2Ref as InstanceType<typeof MxpPopup>;
    }
    _adUnlockPopup2Ref.value?.show();
  }

  /** 隐藏 */
  function hide() {
    _adUnlockPopup2Ref.value?.hide();
  }

  /** 广告解锁 */
  function openADFun() {
    hide();
    typeof openAd === 'function' && openAd();
  }
  defineExpose({
    /** 显示 */
    show,
    /** 隐藏 */
    hide,
  });
</script>

<style lang="scss" scoped>
  .unlock-module {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 325px;

    .butt-box {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 180px;
      height: 43px;
      margin-top: -96px;

      .text {
        font-size: 16px;
        font-weight: bolder;
        color: #ffffff;
      }
    }

    .close-box {
      position: relative;
      z-index: 2;
      padding: 4px;
      margin-top: 20px;
      border-radius: 50%;
    }

    .hover {
      opacity: 0.7;
    }
  }
</style>
